GRID布局

GRID布局

兼容性

IE10 IE11 支持老的语法
目前大多数的浏览器实现了支持, 或者停留在实验特性

基本概念

Grid Container 网格容器
Grid Item 网格项
Grid Line 网格项
Grid Track 网格轨道
Grid Cell 网格单元
Grid Area 网格区

Container的属性

定义在容器的属性 display grid-template-columns grid-template-rows grid-template-areas grid-column-gap grid-row-gap grid-gap justify-items align-items justify-content align-content grid-auto-columns grid-auto-rows grid-auto-flow grid

• display

    grid                生成块级网络
    inline-grid         生成行内网络
    subgrid             作为网格项需要继承父网格的行列大小

• grid-template-columns grid-template-columns 设置行和列的大小

    grid-template-columns: 40px 50px auto 50px 40px ;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
      // line-name track-size line-name 在行轨道或列轨道两边是网格线
    grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];  // 网格线double name
    grid-template-columns: repeat(3, 20px [col-start]) 5%;  // 等价于下面的表达
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
    grid-template-columns: repeaat(3, 1fr);  // 将容器分为三等份
    grid-template-columns: 1fr 50px 1fr 1fr;  // fr 的行列将划分剩余部分

• grid-template-areas

  通过获取网格项中的grid-area属性值（名称），来定义网格模版。重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元

    .container {
      display: grid;
      grid-template-columns: 50px 50px 50px 50px;
      grid-template-rows: auto;
      grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
    }
    .item-a{
      grid-area: header;
    }
    .item-b{
      grid-area: main;
    }
    .item-c{
      grid-area: sidebar;
    }
    .item-d{
      grid-area: footer;
    }
  

• grid-gap: grid-row-gap 和 grid-column-gap 的简写

• justify-items
  垂直于列网格线对齐

    start end center stretch(默认)

• align-items
  垂直于行网格线对齐

    start end center stretch

• justify-content
  使用px等非弹性单位定义, 总网格区域大小可能会小于网格容器, 设置网格横向对其方式

    start           顶部对齐
    end             底部对齐
    center          居中对齐
    stretch         填满网格容器
    space-around    网格项两边间距相等，网格项之间间隔是单侧的2倍
    space-between   两边对齐, 网格项之间间隔相等
    space-evenly    网格项间隔相等
  

• align-content

• grid-auto-columns grid-auto-rows
  自动生成隐式网格轨道, 当定位网格超出网格容器的范围时, 将自动创建隐式网络轨道

• grid-auto-flow

    row         按照行依次从左到右排列
    column      按照列依次从上到下排列
    dense       按先后顺序排列
  

• grid

    grid: 200px auto / 1fr auto 1fr;
  

Item的属性

grid-column grid-column-start grid-column-end 的缩写
grid-row grid-row-start grid-row-end 的缩写
grid-area 父容器定义的 grid-template-areas
justify-self
align-self

• justify-self 定义单个网格项垂直于列网格线的对齐方式

  start:        网格区域左对齐
  end:          网格区域右对齐
  center:       网格区域居中
  stretch:      网格区域填满(默认)

• align-self 定义单个网格项垂直于行网格线的对齐方式